<template>
	<div>
		<a-modal
			:open="props.open"
			:width="
				props.modelInfo && props.modelInfo.width ?
					props.modelInfo.width
				:	'900px'
			"
			:title="
				props.modelInfo && props.modelInfo.title ?
					props.modelInfo.title
				:	'Basic Modal'
			"
			@ok="handleOk"
			okText="保存"
			:confirmLoading="modelConfig.confirmLoading"
			:destroyOnClose="modelConfig.destroyOnClose"
			@cancel="handleCancel"
		>
			<template #footer>
				<a-button key="back" @click="handleCancel">取消</a-button>
				<a-button
					key="submit"
					type="primary"
					:loading="loading"
					@click="handleOk"
					>保存</a-button
				>
			</template>
			<a-form
				ref="formRef"
				name="DatingRegistrationInfoForm"
				class="ant-advanced-search-form"
				:model="formState"
				@finish="onFinish"
				@finishFailed="onFinishFailed"
				:rules="rulesRef"
				:label-col="labelCol"
				:wrapper-col="wrapperCol"
			>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['datingId'].name"
							:label="labelMap['datingId'].label"
						>
							<a-input
								v-model:value="formState.datingId"
								:placeholder="'请填写' + labelMap['datingId'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['userId'].name"
							:label="labelMap['userId'].label"
						>
							<a-input
								v-model:value="formState.userId"
								:placeholder="'请填写' + labelMap['userId'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['registrationTime'].name"
							:label="labelMap['registrationTime'].label"
						>
							<a-date-picker
								v-model:value="formState.registrationTime"
								:format="'YYYY-MM-DD'"
								:getPopupContainer="
									(triggerNode: any) => {
										return triggerNode.parentNode;
									}
								"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['status'].name"
							:label="labelMap['status'].label"
						>
							<a-input
								v-model:value="formState.status"
								:placeholder="'请填写' + labelMap['status'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['payAmount'].name"
							:label="labelMap['payAmount'].label"
						>
							<a-input
								v-model:value="formState.payAmount"
								:placeholder="'请填写' + labelMap['payAmount'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-modal>
	</div>
</template>
<script lang="ts" setup>
import { DatingRegistrationInfoDetail } from './datingRegistrationInfoDetailTs';
import {
	getDatingRegistrationInfoDetail,
	addOrEditDatingRegistrationInfo,
} from '@/api/datingInfo/datingRegistrationInfo/datingRegistrationInfoTs';
import { message, FormInstance } from 'ant-design-vue';
import { ModelInfo } from '../datingRegistrationInfoListTs';

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let loading = ref<boolean>(false);

const formRef = ref<FormInstance>();

const labelMap = ref<any>({
	datingId: { name: 'datingId', label: '约会ID，关联约会表' },
	userId: { name: 'userId', label: '报名人ID，关联用户表' },
	registrationTime: { name: 'registrationTime', label: '报名时间' },
	status: { name: 'status', label: '报名状态' },
	payAmount: { name: 'payAmount', label: '支付金额' },
});

const rulesRef = reactive({
	datingId: [
		{
			required: true,
			message: '约会ID，关联约会表不能为空！',
		},
	],
	userId: [
		{
			required: true,
			message: '报名人ID，关联用户表不能为空！',
		},
	],
	registrationTime: [
		{
			required: true,
			message: '报名时间不能为空！',
		},
	],
	status: [
		{
			required: true,
			message: '报名状态不能为空！',
		},
	],
	payAmount: [
		{
			required: true,
			message: '支付金额不能为空！',
		},
	],
});

const modelConfig = {
	confirmLoading: true,
	destroyOnClose: true,
};

interface Props {
	open?: boolean;
	modelInfo?: ModelInfo;
}
const props = defineProps<Props>();

let formState = ref<DatingRegistrationInfoDetail>({});

const emit = defineEmits(['handleOk', 'handleCancel']);

const handleOk = (): void => {
	loading.value = true;
	if (formRef.value) {
		formRef.value
			.validateFields()
			.then(() => saveDatingRegistrationInfoManager())
			.catch(() => {
				loading.value = false;
			});
	}
};

const handleCancel = (): void => {
	emit('handleCancel', false);
};

//保存约会报名表信息
const saveDatingRegistrationInfoManager = (): void => {
	let method = '';
	if (formState.value.id) {
		method = 'put';
	} else {
		method = 'post';
	}
	addOrEditDatingRegistrationInfo(method, formState.value)
		.then((res) => {
			if (res.code == '200') {
				message.success((res && res.message) || '保存成功！');
				formState.value = {};
				emit('handleOk', false);
			} else {
				message.error((res && res.message) || '保存失败！');
			}
		})
		.catch((error: any) => {
			message.error(error?.message || '查询失败！');
		})
		.finally(() => {
			loading.value = false;
		});
};

const onFinish = (values: any): void => {
	console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any): void => {
	console.log('Failed:', errorInfo);
};

const init = (): void => {
	if (props.modelInfo) {
		if (props.modelInfo.id) {
			getDatingRegistrationInfoDetail(props.modelInfo.id)
				.then((res) => {
					if (res.code == '200') {
						formState.value = res.data;
						modelConfig.confirmLoading = false;
					} else {
						message.error((res && res.message) || '查询失败！');
					}
				})
				.catch((error: any) => {
					message.error(error?.message || '查询失败！');
				});
		} else {
			modelConfig.confirmLoading = false;
			formState.value = {};
		}
	}
};

watch(
	() => props.open,
	(newVal) => {
		if (newVal) {
			init();
		}
	},
	{
		immediate: true,
		deep: true,
	},
);

defineExpose({ handleOk, handleCancel });
</script>
<style lang="scss" scoped></style>
